<template>
  <a-form :form="form">
    <a-row :gutter="8">
      <a-col :md="info ? 24 : 24" :sm="12" class="col-wrapper">
        <a-col :md="md" :sm="12">
          <a-form-item
            label="学号"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-input v-if="!info.xh" v-decorator="[
              'xh',
              {
                rules: [{ required: true, message: '请填写学号!' }],
              }
            ]"/>
            <a-input v-else disabled v-decorator="[ 'xh' ]"/>
            <a-input v-decorator="['id']" type="hidden"/>
            <a-input v-decorator="['communityId']" type="hidden"/>
            <a-input v-decorator="['state']" type="hidden"/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="姓名"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-input v-decorator="['xm',
              {
                rules: [{ required: true, message: '请填写姓名!' }],
              }
            ]"/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="姓名拼音"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-input v-decorator="['xmpy']"/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="曾用名"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-input v-decorator="['cym']"/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="英文姓名"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-input v-decorator="['ywxm']"/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="证件类型"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-select :allowClear="true" v-decorator="['sfzjlxm', {rules: [{ required: true, message: '请选择证件类型!' }]}]">
              <a-select-option v-for="i in TYPE0088" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="证件号码"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-input @change="zjhmChange" v-decorator="['zjhm', {rules: [{ required: true, message: '请填写证件号码!' }]}]"/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="性别"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-select :allowClear="true" v-decorator="['xbm', {rules: [{ required: true, message: '请选择性别!' }]}]">
              <a-select-option v-for="i in TYPE0011" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="血型"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-select :allowClear="true" v-decorator="['xxm']">
              <a-select-option v-for="i in TYPE0078" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="出生日期"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-date-picker v-decorator="['csrq', {rules: [{ required: true, message: '请填写出生日期!' }]}]" style="width: 100%" format="YYYY-MM-DD"/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="民族"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-select :allowClear="true" v-decorator="['mzm']">
              <a-select-option v-for="i in TYPE0017" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="培养来源"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-select :allowClear="true" v-decorator="['xslxm',
              {
                rules: [{ required: true, message: '请填写培养来源!' }],
              }]">
              <a-select-option v-for="i in TYPE0503" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="港澳台侨"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-select :allowClear="true" v-decorator="['gatqm']">
              <a-select-option v-for="i in TYPE0037" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="健康状况"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-select :allowClear="true" v-decorator="['jkzkm']">
              <a-select-option v-for="i in TYPE0013" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="婚姻状况"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-select :allowClear="true" v-decorator="['hyzkm']">
              <a-select-option v-for="i in TYPE0012" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="家庭常住地址"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-input v-decorator="['jtczzz']"/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="户口所在地址"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-input v-decorator="['hkszd']"/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="户口性质"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-select :allowClear="true" v-decorator="['hkxzm']">
              <a-select-option v-for="i in TYPE0002" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="国籍/地区"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-select :allowClear="true" v-decorator="['gjdqm']">
              <a-select-option v-for="i in TYPE0015" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="18">
          <a-form-item style="width:100%"
                       label="出生地"
                       :labelCol="{span: 6,offset: 1}"
                       :wrapperCol="{span: 16, offset: 1}"
                       selfUpdate>
            <a-select style="width:33%" @change="provinceChange" v-decorator="['csdsdm']" :allowClear="true">
              <a-select-option v-for="i in selectMenu.province" :key="i.areaCode" :value="String(i.areaCode)">{{ i.name }}</a-select-option>
            </a-select>
            <a-select style="width:33%" @change="cityChange" v-decorator="['csdcdm']" :allowClear="true">
              <a-select-option v-for="i in selectMenu.city" :key="i.areaCode" :value="String(i.areaCode)">{{ i.name }}</a-select-option>
            </a-select>
            <a-select style="width:33%" v-decorator="['csdxqdm']" :allowClear="true">
              <a-select-option v-for="i in selectMenu.area" :key="i.areaCode" :value="String(i.areaCode)">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="18">
          <a-form-item style="width:100%"
                       label="籍贯"
                       :labelCol="{span: 6,offset: 1}"
                       :wrapperCol="{span: 16, offset: 1}"
                        selfUpdate>
            <a-select style="width:33%" @change="provinceNativeChange" v-decorator="['jgsdm']" :allowClear="true">
              <a-select-option v-for="i in selectMenu.province" :key="i.areaCode" :value="String(i.areaCode)">{{ i.name }}</a-select-option>
            </a-select>
            <a-select style="width:33%" @change="cityNativeChange" v-decorator="['jgcdm']" :allowClear="true">
              <a-select-option v-for="i in selectMenu.ncity" :key="i.areaCode" :value="String(i.areaCode)">{{ i.name }}</a-select-option>
            </a-select>
            <a-select style="width:33%" v-decorator="['jgxqdm']" :allowClear="true">
              <a-select-option v-for="i in selectMenu.narea" :key="i.areaCode" :value="String(i.areaCode)">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="现住址"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-input v-decorator="['xzz']"/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="联系电话"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-input v-decorator="['lxdh', {rules: [{ required: true, message: '请填写联系电话!' }]}]"/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="通信地址"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-input v-decorator="['txdz', {rules: [{ required: true, message: '请填写通信地址' }]}]"/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="电子邮箱"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-input v-decorator="['dzxx']"/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="政治面貌"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-select :allowClear="true" @change="zzmmChange" v-decorator="['zzmmm', {rules: [{ required: true, message: '请填写政治面貌' }]}]">
              <a-select-option v-for="i in TYPE0020" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="宗教信仰"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-select :allowClear="true" v-decorator="['xyzjm']">
              <a-select-option v-for="i in TYPE0001" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="身份证有效期"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-date-picker v-decorator="['sfzjyxq']" style="width: 100%" format="YYYY-MM-DD"/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="是否独生子女"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-select :allowClear="true" v-decorator="['sfdszn']">
              <a-select-option value="是">是</a-select-option>
              <a-select-option value="否">否</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="学习方式"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-select :allowClear="true" v-decorator="['xxfs']">
              <a-select-option v-for="i in TYPE0305" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
            <a-input v-decorator="['xxfsmc']" type="hidden"/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="宿舍电话"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-input v-decorator="['ssdh']"/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="实验室电话"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-input v-decorator="['sysdh']"/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="宿舍地址"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-input v-decorator="['ssdz']"/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="家庭电话"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-input v-decorator="['jtdh']"/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="家庭住址"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-input v-decorator="['jtzz']"/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="家庭邮政编码"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-input v-decorator="['jyyzbm']"/>
          </a-form-item>
        </a-col>
      </a-col>
    </a-row>
  </a-form>
</template>
<script>
import { mapState } from 'vuex'
import moment from 'moment'
const selectArr = ['TYPE0011', 'TYPE0088', 'TYPE0078', 'TYPE0017', 'TYPE0503', 'TYPE0037', 'TYPE0013', 'TYPE0012', 'TYPE0002', 'TYPE0015', 'TYPE0020', 'TYPE0001', 'TYPE0305']
export default {
  props: ['info'],
  data () {
    return {
      md: (12),
      uploadUrl:`${process.env.SERVICE_URL}upload/img`,
      selectMenu: {},
      loading: false
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  computed: {
    ...mapState({
      TYPE0305: state => state.app['TYPE0305'], // 学习方式
      TYPE0001: state => state.app['TYPE0001'], // 信仰宗教
      TYPE0020: state => state.app['TYPE0020'], // 政治面貌
      TYPE0015: state => state.app['TYPE0015'], // 国籍/地区
      TYPE0002: state => state.app['TYPE0002'], // 户口性质
      TYPE0012: state => state.app['TYPE0012'], // 婚姻状况
      TYPE0013: state => state.app['TYPE0013'], // 健康状况
      TYPE0037: state => state.app['TYPE0037'], // 港澳台侨
      TYPE0503: state => state.app['TYPE0503'], // 培养来源
      TYPE0017: state => state.app['TYPE0017'], // 民族
      TYPE0078: state => state.app['TYPE0078'], // 血型
      TYPE0088: state => state.app['TYPE0088'], // 证件类型
      TYPE0011: state => state.app['TYPE0011'] // 性别
    })
  },
  watch: {
    info (val) {
      if (val.xh) {
        this.initForm()
      }
    }
  },
  created () {
    selectArr.forEach(v => {
      this.$store.dispatch('app/setDictionary', v)
    })
    this.initSelectMenu()
  },
  methods: {
    filterOption (value, op) {
      return op.componentOptions.children[0].text.indexOf(value) !== -1
    },
    initForm () {
      this.$nextTick(() => {
        if (this.info.csdsdm) {
          this.provinceChange(this.info.csdsdm)
        }
        if (this.info.csdcdm) {
          this.cityChange(this.info.csdcdm)
        }
        if (this.info.jgsdm) {
          this.provinceNativeChange(this.info.jgsdm)
        }
        if (this.info.jgcdm) {
          this.cityNativeChange(this.info.jgcdm)
        }
        let keys = Object.keys(this.form.getFieldsValue())
        let obj = {}
        keys.forEach(key => {
          obj[key] = this.info[key]
        })
        this.form.setFieldsValue(obj)
      })
    },
    initSelectMenu () {
      let allRequest = [
        this.$api.base.areaList()
      ]
      Promise.all(allRequest).then(res => {
        this.selectMenu = {
          province: res[0].data
        }
      })
    },
    provinceChange (v) {
      this.form.setFieldsValue({csdcdm: '', csdxqdm: ''})
      if (v) {
        this.$api.base.areaList({parentCode: v}).then(res => {
          this.$set(this.selectMenu, 'city', res.data)
        })
      } else {
        this.$set(this.selectMenu, 'city', [])
      }
      this.$set(this.selectMenu, 'area', [])
    },
    cityChange (v) {
      this.form.setFieldsValue({csdxqdm: ''})
      if (v) {
        this.$api.base.areaList({parentCode: v}).then(res => {
          this.$set(this.selectMenu, 'area', res.data)
        })
      } else {
        this.$set(this.selectMenu, 'area', [])
      }
    },
    zjhmChange(v){
      let sfzjlxm = this.form.getFieldValue('sfzjlxm');
      const {value} = v.target;
      if("1" === sfzjlxm && value && (value.length === 15 || value.length === 18)){//居民省份证
        this.form.setFieldsValue({"csrq":moment(this.getBirthdatByIdNo(value), 'YYYY-MM-DD')});
      }
    },
    getBirthdatByIdNo(iIdNo) {
      let tmpStr = "";
      iIdNo = iIdNo.replace(/^\s+|\s+$/g, "");
      if (iIdNo.length == 15) {
        tmpStr = iIdNo.substring(6, 12);
        tmpStr = "19" + tmpStr;
        tmpStr = tmpStr.substring(0, 4) + "-" + tmpStr.substring(4, 6) + "-" + tmpStr.substring(6);
        return tmpStr;
      }else{
        tmpStr = iIdNo.substring(6, 14);
        tmpStr = tmpStr.substring(0, 4) + "-" + tmpStr.substring(4, 6) + "-" + tmpStr.substring(6);
        return tmpStr;
      }
    },
    zzmmChange (v) {
      this.info.zzmmm = v
      this.$emit('update:info', this.info)
    },
    provinceNativeChange (v) {
      this.form.setFieldsValue({jgcdm: '', jgxqdm: ''})
      if (v) {
        this.$api.base.areaList({parentCode: v}).then(res => {
          this.$set(this.selectMenu, 'ncity', res.data)
        })
      } else {
        this.$set(this.selectMenu, 'ncity', [])
      }
      this.$set(this.selectMenu, 'narea', [])
    },
    cityNativeChange (v) {
      this.form.setFieldsValue({jgxqdm: ''})
      if (v) {
        this.$api.base.areaList({parentCode: v}).then(res => {
          this.$set(this.selectMenu, 'narea', res.data)
        })
      } else {
        this.$set(this.selectMenu, 'narea', [])
      }
    }
  }
}
</script>

<style lang="less" scoped>
  /*.col-wrapper .ant-col-sm-12, .ant-col-md-8{*/
    /*min-height: 91px;*/
  /*}*/
</style>
